<template>
  <div class="input-number">
    <fx-card title="基础用法">
      <fx-input-number v-model="baseInputNumber"></fx-input-number>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="限制最大最小值 min=5 max=10">
      <fx-input-number v-model="inputNumber" :min="5" :max="10"></fx-input-number>
      <template #hide>
        <pre v-highlight="number"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="禁用状态">
      <fx-input-number v-model="disabledInputNumber" disabled></fx-input-number>
      <template #hide>
        <pre v-highlight="disabled"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="步数">
      <fx-input-number v-model="stepInputNumber" :step="3"></fx-input-number>
      <template #hide>
        <pre v-highlight="step"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="按钮位置">
      <fx-row>
        <fx-col :span="4">
          右按钮
        </fx-col>
        <fx-col>
          <fx-input-number v-model="rightInputNumber" right></fx-input-number>
        </fx-col>
      </fx-row>
      <fx-row class="mt10">
        <fx-col :span="4">
          取消输入框
        </fx-col>
        <fx-col>
          <span class="mr10">{{ rightInputNumber }}</span>
          <fx-input-number v-model="rightInputNumber" :is-input="false"></fx-input-number>
        </fx-col>
      </fx-row>
      <fx-row class="mt10">
        <fx-col :span="4">
          隐藏按钮
        </fx-col>
        <fx-col>
          <fx-input-number v-model="rightInputNumber" :is-btn="false"></fx-input-number>
        </fx-col>
      </fx-row>
      <template #hide>
        <pre v-highlight="right"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="大小">
      <fx-row class="mb10">
        <fx-col :span="10">
          <fx-radio-group v-model="sizeRadio">
            <fx-radio-button label="large">large</fx-radio-button>
            <fx-radio-button label="middle">middle</fx-radio-button>
            <fx-radio-button label="default">default</fx-radio-button>
            <fx-radio-button label="mini">mini</fx-radio-button>
          </fx-radio-group>
        </fx-col>
        <fx-col>
          <span class="mr10">宽度</span>
          <fx-input-number v-model="widthInput"></fx-input-number>
        </fx-col>
      </fx-row>
      <fx-input-number v-model="sizeInputNumber" :width="widthInput" :size="sizeRadio"></fx-input-number>
      <template #hide>
        <pre v-highlight="size"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="API checkboxButton 属性">
      <fx-table :data="inputNumberApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const inputNumberApi = [
  { name: 'modelValue / v-model', directions: '绑定值', type: 'Number' },
  { name: 'size', directions: '大小尺寸', type: 'String', value: 'large | middle | default | mini', default: 'default' },
  { name: 'disabled', directions: '是否禁用', type: 'Boolean', default: 'false' },
  { name: 'right', directions: '是否将加减按钮显示在右侧', type: 'Boolean', default: 'false' },
  { name: 'isBtn', directions: '是否需要加减按钮', type: 'Boolean', default: 'true' },
  { name: 'isInput', directions: '是否需要输入框', type: 'Boolean', default: 'true' },
  { name: 'step', directions: '加减增加步长', type: 'Number', default: 1 },
  { name: 'max', directions: '最大值', type: 'Number' },
  { name: 'min', directions: '最小值', type: 'Number' }
]

const baseInputNumber = ref<number>(1)
const inputNumber = ref<number>(6)
const disabledInputNumber = ref<number>(1)
const stepInputNumber = ref<number>(1)
const rightInputNumber = ref<number>(1)
const sizeInputNumber = ref<number>(1)
const widthInput = ref<number>(120)
const sizeRadio = ref<string>('default')

const base = '<fx-input-number v-model="baseInputNumber"></fx-input-number>'
const number = '<fx-input-number v-model="inputNumber" :min="5" :max="10"></fx-input-number>'
const disabled = '<fx-input-number v-model="disabledInputNumber" disabled></fx-input-number>'
const step = '<fx-input-number v-model="stepInputNumber" :step="3"></fx-input-number>'
const right = `<fx-row>
  <fx-col :span="4">
    右按钮
  </fx-col>
  <fx-col>
    <fx-input-number v-model="rightInputNumber" right></fx-input-number>
  </fx-col>
</fx-row>
<fx-row class="mt10">
  <fx-col :span="4">
    取消输入框
  </fx-col>
  <fx-col>
    <span class="mr10">{{ rightInputNumber }}</span>
    <fx-input-number v-model="rightInputNumber" :is-input="false"></fx-input-number>
  </fx-col>
</fx-row>
<fx-row class="mt10">
  <fx-col :span="4">
    隐藏按钮
  </fx-col>
  <fx-col>
    <fx-input-number v-model="rightInputNumber" :is-btn="false"></fx-input-number>
  </fx-col>
</fx-row>`
const size = `<fx-input-number v-model="sizeInputNumber" size="large"></fx-input-number>
<fx-input-number v-model="sizeInputNumber" size="middle"></fx-input-number>
<fx-input-number v-model="sizeInputNumber" size="default"></fx-input-number>
<fx-input-number v-model="sizeInputNumber" size="mini"></fx-input-number>`
</script>

<style scoped lang="scss">
.input-number {
}
</style>
